import "./index.scss";
import { Table, Form, Input, Button, Select } from "antd";
import type { TableProps } from "antd";
import type { FormProps } from "antd";

const data: DataType[] = [
	{
		key: "1",
		phone: "132132132132",
	},
	{
		key: "2",
		phone: "132132132132",
	},
	{
		key: "3",
		phone: "132132132132",
	},
];
interface DataType {
	key: string;
	phone: string;
}

type FieldType = {
	phone?: string;
};

const columns: TableProps<DataType>["columns"] = [
	{
		title: "序号",
		dataIndex: "key",
		key: "key",
		width: "30%",
	},
	{
		title: "手机号",
		dataIndex: "phone",
		width: "50%",
		key: "phone",
	},
	{
		title: "操作",
		key: "action",
		render: () => <div className="del">删除</div>,
	},
];
const onFinish: FormProps<FieldType>["onFinish"] = (values) => {
	console.log("Success:", values);
};
const handleChange = (value: string) => {
	console.log(`selected ${value}`);
};
function AdminManage() {
	return (
		<div className="examHistory_wrap">
			<div className="examHistory_form">
				<Form layout="inline" onFinish={onFinish}>
					<Form.Item<FieldType>
						name="phone"
						rules={[{ required: true, message: "请输入手机号!" }]}
					>
						<Input placeholder="请输入手机号" />
					</Form.Item>

					<Form.Item wrapperCol={{ offset: 2, span: 22 }}>
						<Button type="primary" htmlType="submit">
							设为管理员
						</Button>
					</Form.Item>
				</Form>
			</div>
			<Table columns={columns} dataSource={data} />
		</div>
	);
}

export default AdminManage;
